<template>
	<div class="project-container" v-loading="loading" ref="projectRef">
		<a
			v-for="item in data"
			:key="item.id"
			:href="item.url ? item.url : `javascript:alert('该项目无法通过外网访问')`"
			:target="item.url ? '_blank' : '_self'"
			class="project-item"
		>
			<img class="thumb" alt="暂无图片" v-lazy="item.thumb" />
			<div class="info">
				<h2>
					{{ item.name }}
					<a class="github" target="_blank" :href="item.github" v-if="item.github">github</a>
				</h2>
				<p v-for="(desc, index) in item.description" :key="index">
					{{ desc }}
				</p>
			</div>
		</a>
		<empty v-if="data.length === 0 && !loading"></empty>
	</div>
</template>

<script>
import { mapState } from 'vuex'
import mainScroll from '@/mixins/mianScroll.js'
import Empty from '@/components/Empty.vue'
export default {
	name: 'Project',
	mixins: [mainScroll('projectRef')],
	components: { Empty },
	created() {
		this.$store.dispatch('project/fetchProject')
	},
	computed: {
		...mapState('project', ['loading', 'data']),
	},
}
</script>

<style lang="less" scoped>
@import '~@/styles/basic/var.less';
.project-container {
	width: 100%;
	height: 100%;
	overflow-x: hidden;
	overflow-y: auto;
	scroll-behavior: smooth;
	.project-item {
		width: calc(100% - 18px);
		height: 200px;
		padding: 5px;
		margin: 5px 10px;
		display: flex;
		transition: all 0.3s;
		box-shadow: 0 0px 1px rgba(0, 0, 0, 0.3);
		&:hover {
			box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
		}
		.thumb {
			flex: 0 0 200px;
			padding: 10px;
			width: 200px;
			height: 100%;
		}
		.info {
			flex: 1 1 auto;
			color: #000;
			display: flex;
			flex-direction: column;
			h2 {
				margin: 5px 10px;
			}
			p {
				margin: 0 10px;
			}
		}
	}
}
.github {
	font-size: 14px;
	color: @primary;
	transition: all 0.5s;
	&:hover {
		color: lighten(@primary, 10%);
	}
}
</style>
